<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新扫雷</title>
</head>
<body>
<style>
    #disc {
        width: 360px;
        height: 300px;
        border: 1px solid #cccccc;
    }

    .mineBlock {
        width: 30px;
        height: 30px;
        background: #6583DC;
        border: 1px solid #cccccc;
        float: left;
        box-sizing: border-box;
        text-align: center;
        line-height: 30px;
    }
</style>

<div id="disc"></div>
<div id="start">开始</div>

<script src="mymodel/APPDebugTools.js"></script>
<script>
    APPDebug.init(true);
    var obj_ = {
        setMineBlock: function () {//添加盘块
            var ts = this;

            var _disc = document.getElementById('disc');
            _disc.innerHTML = '';

            for (var i = 1; i <= ts.mineHeightCount; i++) {
                for (var k = 1; k <= ts.mineWidthCount; k++) {
                    var el = document.createElement('div');
                    var id = i + '-' + k;

                    ts.mineBlockARY.push({"mineXY": id});
                    el.setAttribute('class', 'mineBlock');
                    el.setAttribute('mineL', id);

                    _disc.appendChild(el);
                }

            }
        },
        setBomb: function () {
            var ts = this;
            var i = 0;

            ts.BoobAry = [];//用于存放雷坐标的数组
            ts.temporaryAry = []
            do {
                var minePosition = Math.floor(Math.random() * ts.mineBlockCount);

                console.log(minePosition);
                if (ts.temporaryAry.indexOf(minePosition) == -1) {
                    ts.temporaryAry.push(minePosition);
                    ts.BoobAry.push(ts.mineBlockARY[minePosition]["mineXY"]);//记录直接雷点坐标

                    i++;
                } else {
                    console.log('第' + i + '次获取地雷坐标' + minePosition + '重复.正在重新获取...');
                }
            } while (i < ts.mineCount);

            console.log(ts.BoobAry);

        },
        getAroundBlockCount: function (mineL) {
            var ts = obj_;

            //获取坐标周围的元素
            var mineL_split_x = mineL.split('-')[1];
            var mineL_split_y = mineL.split('-')[0];
            var AroundBlockARY = [];
            var mineCnt = 0;


            if ((mineL_split_y - 1) && (mineL_split_x - 1)) {
                AroundBlockARY.push((mineL_split_y - 1) + '-' + (mineL_split_x - 1));//左上角
            }
            AroundBlockARY.push((mineL_split_y - 1) ? ((mineL_split_y - 1) + '-' + mineL_split_x) : false);//上面一个块
            if ((ts.mineWidthCount > mineL_split_x) && (mineL_split_y - 1)) {
                AroundBlockARY.push((mineL_split_y - 1) + '-' + (parseInt(mineL_split_x) + 1));//右上角
            }
            AroundBlockARY.push((mineL_split_x - 1) ? (mineL_split_y + '-' + (mineL_split_x - 1)) : false);//前一个块
            AroundBlockARY.push((ts.mineWidthCount > mineL_split_x ) ? (mineL_split_y + '-' + (parseInt(mineL_split_x) + 1)) : false);//后一个块
            if ((ts.mineHeightCount > mineL_split_y) && (mineL_split_x - 1)) {
                AroundBlockARY.push((parseInt(mineL_split_y) + 1) + '-' + (mineL_split_x - 1));//左下角
            }
            AroundBlockARY.push((ts.mineHeightCount > mineL_split_y ) ? ((parseInt(mineL_split_y) + 1) + '-' + mineL_split_x) : false);//下面一个块
            if ((ts.mineWidthCount > mineL_split_x) && (ts.mineHeightCount > mineL_split_y)) {
                AroundBlockARY.push((parseInt(mineL_split_y) + 1) + '-' + (parseInt(mineL_split_x) + 1));//右下角
            }

            for (var i = 0; i < AroundBlockARY.length; i++) {
                if (AroundBlockARY[i] && ts.BoobAry.indexOf(AroundBlockARY[i]) >= 0) {
                    mineCnt++;
                }
            }
            return mineCnt;
        },
        bindEvent: function () {
            var ts = this;
            document.querySelector('#start').onclick = function () {
                ts.init();
            }
            //console.log(document.querySelectorAll('.mineBlock '));
            for (var i = 0; i < document.querySelectorAll('.mineBlock ').length; i++) {

                //左键事件
                document.querySelectorAll('.mineBlock ')[i].onclick = function () {

                    if (this.getAttribute('mineL') != null && ts.BoobAry.indexOf(this.getAttribute('mineL')) >= 0) {//爆炸
                        alert("you'r Loser!");
                    } else {//计算周围雷数量
                        this.innerHTML = ts.getAroundBlockCount(this.getAttribute('mineL'));
                        this.style.background = '#fff';
                        this.removeAttribute('mineL');
                    }
                    if (document.querySelectorAll('[mineL]').length == ts.BoobAry.length) {
                        alert("you'r win!");
                    }
                }
                document.querySelectorAll('.mineBlock ')[i].oncontextmenu = function () {

                }
            }
        },
        config: function () {
            var ts = this;
            ts.mineBlockWH = 30;//雷块高宽
            ts.mineRate = 0.1;//雷比例
            ts.mineCount = 0;//要布置雷数量
            ts.mineBlockARY = [];

        },
        init: function () {
            var ts = this;
            ts.config();
            ts.Ddisc = document.querySelector('#disc');


            ts.Ddisc_width = ts.Ddisc.clientWidth;//取雷盘高宽
            ts.Ddisc_height = ts.Ddisc.clientHeight;

            ts.mineWidthCount = parseInt(ts.Ddisc_width / ts.mineBlockWH);//高宽除以单个雷高宽，得每排每列几个雷(去小数点)
            ts.mineHeightCount = ts.Ddisc_height / ts.mineBlockWH;

            ts.mineBlockCount = ts.mineWidthCount * ts.mineHeightCount;//得雷块数量

            ts.mineCount = ts.mineBlockCount * ts.mineRate;//要布置雷数量

            console.log(ts.mineWidthCount);
            console.log(ts.mineHeightCount);

            document.oncontextmenu = new Function("return false;");//禁止页面右击

            ts.setMineBlock();//添加雷块
            ts.setBomb();//添加地雷
            ts.bindEvent();//添加事件
        }
    }

    obj_.init();
</script>
</body>
</html>